<template>
    <div class="settingShade" @click="closeShade"></div>
    <div class="settingMenu" @click.stop>
        <div class="triangle"></div>
        <router-link class="link" to="/markLevel">创建关卡</router-link>
    </div>
</template>

<script>
export default {
    props: ['creatStatus'],
    methods: {
        closeShade() {
            this.$emit('closeShade');
        },
    },
}
</script>

<style>
    .settingShade { position: absolute; width: 100%; height: 100%; position: absolute; top: 0px; left: 0; z-index: 100;}
    .settingMenu { position: absolute; right: 5px; border: 1px solid #ccc; padding: 20px; border-radius: 15px; background-color: #fff; top: 70px; z-index: 200;font-size: 25px;}
    .settingMenu .link { color: #333; text-decoration: none; }

    .triangle {position: absolute;top: -15px;right: 10px;width: 0;height: 0;border-left: 14px solid transparent;border-right: 14px solid transparent;border-bottom: 16px solid #ccc;}
    .triangle::after { content: '';position: absolute;top: 2px;right: -14px;width: 0;height: 0;border-left: 14px solid transparent;border-right: 14px solid transparent;border-bottom: 16px solid #fff; }
</style>